

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>

<script type="text/javascript">
$(function(){
	var stock = ${p.stock};
	$(".productNumberSetting").keyup(function(){
		var num = $(this).val();
		num = parseInt(num);
		if(isNaN(num))
			num = 1;
		if(num <= 0)
			num = 1;
		if(num > stock)
			num = stock;
		$(this).val(num);
	});
	$(".increaseNumber").click(function(){
		var num = $(".productNumberSetting").val();
		num++;
		if(num > stock)
			num = stock;
		$(".productNumberSetting").val(num);
	});
	$(".decreaseNumber").click(function(){
		var num = $(".productNumberSetting").val();
		num--;
		if(num <= 0)
			num = 1;
		$(".productNumberSetting").val(num);
	});
	$(".addCartLink").click(function(){
		var page = "forecheckLogin";
		$.get(
				page,
				function(result){
					if(result == "success") {
						var pid = ${p.id};
						var num = $(".productNumberSetting").val();
						var addCartPage = "foreaddCart";
						$.get(
								addCartPage,
								{"pid":pid,"num":num},
								function(result){
									if(result == "success") {
										$(".addCartButton").html("已加入购物车");
										$(".addCartButton").attr("disabled","disabled");
										$(".addCartButton").css("background-color","lightgray");
                                        $(".addCartButton").css("border-color","lightgray");
                                        $(".addCartButton").css("color","black");
									}
								}
						);
					} else{
						$("#loginModal").modal("show");
					}
				}
		);
		return false;
	});
	$(".buyLink").click(function(){
		var page = "forecheckLogin";
		$.get(
				page,
				function(result){
					if(result == "success") {
						var num = $(".productNumberSetting").val();
						location.href = $(".buyLink").attr("href") + "&num=" + num;
					} else{
						$("#loginModal").modal("show");
					}
				}
		);
		return false;
	});
	
// 	模态登录窗口验证与登录
    $("button.loginSubmitButton").click(function(){
        var name = $("#name").val();
        var password = $("#password").val();
         
        if(0==name.length||0==password.length){
            $("span.errorMessage").html("请输入账号密码");
            $("div.loginErrorMessageDiv").show();           
            return false;
        }
         
        var page = "foreloginAjax";
        $.get(
                page,
                {"name":name,"password":password},
                function(result){
                    if("success"==result){
                        location.reload();
                    }
                    else{
                        $("span.errorMessage").html("账号密码错误");
                        $("div.loginErrorMessageDiv").show();                       
                    }
                }
        );          
         
        return true;
    });
     
// 	小图悬停显示大图
    $("img.smallImage").mouseenter(function(){
        var bigImageURL = $(this).attr("bigImageURL");
        $("img.bigImg").attr("src",bigImageURL);
    });
//  预加载大图
    $("img.bigImg").load(function(){
    	$("img.smallImage").each(function(){
            var bigImageURL = $(this).attr("bigImageURL");
            img = new Image();
            img.src = bigImageURL;
             
            img.onload = function(){
                console.log(bigImageURL);   
                $("div.img4load").append($(img));
            };
        });
    });
    
});
</script>
<div class="imgAndInfo">
	<div class="imgInimgAndInfo">
		<img  width="100px" class="bigImg" src="/pic/tmall_img/productSingle/${p.firstProductImage.id}.jpg">
		<div class="smallImageDiv">
			<c:forEach items="${p.productSingleImages}" var="si">
				<img  width="56px" class="smallImage" src="/pic/tmall_img/productSingle_small/${si.id}.jpg"  bigImageURL="/pic/tmall_img/productSingle/${si.id}.jpg">
			</c:forEach>
		</div>
		<div class="img4load hidden" ></div>
	</div>
	<div class="infoInimgAndInfo">
		<div class="productTitle">
			${p.name}
		</div>
                <div class="productSubTitle">
			${p.subTitle}
		</div>
		<div class="productPrice">
			<div class="juhuasuan">
				<span class="juhuasuanBig">聚划算</span>
				<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
			</div>
			<div class="productPriceDiv">
				<div class="gouwujuanDiv"><img height="16px" src="img/site/gouwujuan.png">
				<span> 全天猫实物商品通用</span>
				</div>
				<div class="originalDiv">
					<span class="originalPriceDesc">价格</span>
					<span class="originalPriceYuan">¥</span>
					<span class="originalPrice">
						<fmt:formatNumber value="${p.originalPrice}" pattern="0.00" />					
					</span>
				</div>
				<div class="promotionDiv">
					<span class="promotionPriceDesc">促销价 </span>
					<span class="promotionPriceYuan">¥</span>
					<span class="promotionPrice">
						<fmt:formatNumber value="${p.promotePrice}" pattern="0.00" />
					</span>				
				</div>
			</div>
		</div>
		<div class="productSaleAndReviewNumber">
			<div>销量 <span class="redColor boldWord"> ${p.saleCount}</span></div>	
			<div>累计评价 <span class="redColor boldWord"> ${p.reviewCount}</span></div>	
		</div>
		<div class="productNumber">
			<span>数量</span>
			<span>
				<span class="productNumberSettingSpan">
				<input type="text" value="1" class="productNumberSetting">
				</span>
				<span class="arrow">
					<a class="increaseNumber" href="#nowhere">
					<span class="updown">
					   <img src="img/site/increase.png">
					</span>
					</a>
					<span class="updownMiddle"> </span>
					<a class="decreaseNumber" href="#nowhere">
					<span class="updown">
					    <img src="img/site/decrease.png">
					</span>
					</a>
				</span>
			件</span>
			<span>库存${p.stock}件</span>
		</div>
		<div class="serviceCommitment">
			<span class="serviceCommitmentDesc">服务承诺</span>
			<span class="serviceCommitmentLink">
				<a href="#nowhere">正品保证</a>
				<a href="#nowhere">极速退款</a>
				<a href="#nowhere">赠运费险</a>
				<a href="#nowhere">七天无理由退换</a>
			</span>
		</div>	
		<div class="buyDiv">
			<a href="forebuyone?pid=${p.id}" class="buyLink"><button class="buyButton">立即购买</button></a>
			<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
		</div>
	</div>
	<div style="clear:both"></div>
</div>

